<template>
  <div>
    <el-input
      v-model="scName"
      placeholder="请选择仓库"
      size="small"
      :readonly="true"
    >
      <el-button slot="append" icon="el-icon-thumb" @click="handleReturn"
        >选择</el-button
      >
    </el-input>

    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="100px" size="mini"
      >
        <el-form-item label="仓库名称" prop="storeName">
          <el-input
            v-model="queryParams.storeName"
            placeholder="请输入仓库名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
      
        <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
      </el-form>
      
      
      
      <el-table v-loading="loading" :data="storehouseList">
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
         <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-radio"
            @click="handleSelect(scope.row)"
            >选择</el-button
          >
         </template>
        </el-table-column>
        <el-table-column label="ID" align="center" prop="id" />
        <el-table-column label="仓库名称" align="center" prop="storeName" />
        <el-table-column label="位置" align="center" prop="location" />
        <el-table-column label="总面积" align="center" prop="totalArea" />
        <el-table-column label="业主" align="center" prop="owner" />
        <el-table-column label="联系人" align="center" prop="contactPerson" />
        <el-table-column label="经度" align="center" prop="longitude" />
        <el-table-column label="纬度" align="center" prop="latitude" />
      </el-table>
    </el-dialog>
  </div>
</template>



<style>
</style>


<script>
import { listStorehouse } from "@/api/supplier/storehouse";
export default {
  props: {
    storehouseProps: {
      id: null,
      storeName: null,
    },
  },
  data() {
    return {
      // 是否显示弹出层
      open: false,
      // 总条数
      total: 0,
      // 仓库表格数据
      storehouseList: [],
      // 弹出层标题
      title: "",
      scName: this.storehouseProps.storeName,
      // 遮罩层
      loading: true,
      queryParams: {},
    };
  },
  methods: {
    handleReturn() {
      this.open = true;
      this.title = "选择仓库";
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查询仓库列表 */
    getList() {
      this.loading = true;
      listStorehouse(this.queryParams).then((response) => {
        this.storehouseList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleSelect(row) {
  
  
      this.scName = row.storeName;
      this.open = false;
      this.$emit("update:storehouseProps", row);
      this.$emit("input", row.storeName);
    },
  },
};
</script>